<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="css/user.css"/>
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div id="heima">

            <a href="/logout">退出</a>
    <hr>
            <!--用户列表标签-->
              <table border="1px"  width="100%">
                     <tr>
                         <td>用户编号</td>
                         <td>用户名称</td>
                         <td>用户密码</td>
                         <td>用户性别</td>
                         <td>用户年纪</td>
                         <td>用户生日</td>
                     </tr>

                  <!--[-->
                  <!--{-->
                  <!--"id": 1,-->
                  <!--"username": "郭富城",-->
                  <!--"password": "12345",-->
                  <!--"name": "张三",-->
                  <!--"age": 66,-->
                  <!--"sex": 1,-->
                  <!--"birthday": "1984-08-08"-->
                  <!--},.....]-->

                  <tr v-for="user in userList">
                       <td>{{user.id}}</td>
                       <td>{{user.username}}</td>
                       <td>{{user.password}}</td>
                       <td>{{user.sex==1?"男":"女"}}</td>
                       <td>{{user.age}}</td>
                       <td>{{user.birthday}}</td>
                  </tr>

              </table>
  </div>

</div>
</body>
<script>
        // 数据模型  vue对象 实例化
      var   vue = new Vue({
          el:"#heima",  //  挂载标签的申明
          data:{
              userList:[], //   赋值 来自后台 ajax请求结果\
              name:"tom"
          },
          created(){
              // alert("----")
              axios.get("user/findAll").then((res)=>{
                  //  服务器回送json数据    axios组件 使用 res.data接收后台的纯数据
                   //alert(JSON.stringify(res.data))
                  this.userList = res.data  //  数据模型  userList  赋值
              })
          }

      })




</script>


</html>
